Passed
Push — dev ( 960b6d...f9a638 )
by Kasper
01:04 queued 12s
created

ScooterModal.tsx ➔ ScooterModal   D

Complexity

Conditions 9

Size

Total Lines 108
Code Lines 93

Duplication

Lines 0
Ratio 0 %

Importance

Changes 0
Metric Value
eloc 93
dl 0
loc 108
rs 4.8957
c 0
b 0
f 0
cc 9

How to fix   Long Method   

Long Method

Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.

For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.

Commonly applied refactorings include:

1
import { stopLocationUpdatesAsync } from "expo-location";
2
import React from "react";
3
import { useState, useEffect } from 'react';
4
import { View, Text, TextInput, Button, Pressable, StyleSheet, Image, StatusBar, Modal } from "react-native";
5
import mapModel from "../../models/map";
6
import GestureRecognizer from 'react-native-swipe-gestures';
7
import scooterModel from "../../models/scooter";
8
import { start } from "react-native-compass-heading";
9
import { showMessage, hideMessage } from "react-native-flash-message";
10
11
export default function ScooterModal({navigation, scooter, modalVisible, setModalVisible, currentCity, setJourneyModal, setToggleTimer}) {
12
    const [scooterName, setScooterName] = useState(null);
13
    const [scooterNumber, setScooterNumber] = useState(null);
14
    const [battery, setBattery] = useState(null);
15
    const [fixedRate, setFixedRate] = useState(null);
16
    const [timeRate, setTimeRate] = useState(null);
17
    const [scooterId, setScooterId] = useState(null);
18
19
    const batteryImages = {
20
        '100': require('../../assets/battery_100.png'),
21
        '75': require('../../assets/battery_75.png'),
22
        '50': require('../../assets/battery_50.png'),
23
        '25': require('../../assets/battery_25.png')
24
    }
25
26
    function getBattery(batteryPercentage) {
27
        if (batteryPercentage >= 75) {
28
            return '100'
29
        } else if (batteryPercentage >= 50) {
30
            return '75'
31
        } else if (batteryPercentage >= 25) {
32
            return '50'
33
        } else {
34
            return '25'
35
        }
36
    };
37
38
    useEffect(() => {
39
        function getScooterInfo(): void {            
40
            if (scooter) {
41
                const title = scooter['name'].split('#');
42
                setScooterName(title[0]);
43
                setScooterNumber(title[1]);
44
                setBattery(getBattery(scooter['battery']));
45
                setScooterId(scooter['_id']);
46
47
                setFixedRate(currentCity['taxRates']['fixedRate']);
48
                setTimeRate(currentCity['taxRates']['timeRate']);                
49
            }
50
        }
51
        getScooterInfo();
52
    });
53
54
55
    async function startJourney() {
56
        const result = await scooterModel.startScooter(scooterId);
57
58
        if (Object.prototype.hasOwnProperty.call(result, 'errors')) {
59
            showMessage({
60
                message: result['errors']['title'],
61
                type: 'danger'
62
            })
63
64
            return;
65
        };
66
67
        showMessage({
68
            message: result['message'],
69
            type: 'success'
70
        });
71
72
        setModalVisible(!modalVisible);
73
        setJourneyModal(true);
74
    };
75
76
    return (
77
        <GestureRecognizer
78
            style={{flex: 1}}
79
            onSwipeDown={ () => setModalVisible(false) }
80
        >
81
        <Modal
82
        animationType="slide"
83
        transparent={true}
84
        visible={modalVisible}
85
        onRequestClose={() => {
86
            setModalVisible(!modalVisible)
87
        }}
88
89
        >
90
            <View style={styles.modalContainer}></View>
91
92
93
            <View style={styles.modalMessage}>
94
            <View style={styles.swipeButton}></View>
95
96
                <View style={styles.titleContainer}>
97
                    <Image style={styles.scooterImage} source={require('../../assets/scooter2.png')}></Image>
98
99
                    <View style={styles.textContainer}>
100
                        <Text style={styles.scooterTitle}> {scooterName} {scooterNumber}</Text>
101
                        <Image style={styles.battery} source={batteryImages[`${battery}`]}></Image>
102
                    </View>
103
104
                </View>
105
 
106
                <Pressable style={styles.tourButton} onPress={() => {
107
                    startJourney();
108
                    setToggleTimer(true);
109
                }}>
110
                    <Text style={{color: 'white'}}>Start tour</Text>
111
                </Pressable>
112
113
                <Text style={{color: 'grey'}}> {fixedRate} kr unlocking + {timeRate} kr / min. </Text>
114
                
115
            </View>
116
        </Modal>
117
    </GestureRecognizer>
118
    )
119
}
120
121
const styles = StyleSheet.create({
122
    modalContainer: {
123
        // backgroundColor: 'rgba(80, 80, 80, 0.6)',
124
        width: '100%',
125
        height: '100%',
126
        flex: 1,
127
    },
128
129
    titleContainer: {
130
        flexDirection: 'row',
131
        alignItems: 'center',
132
        marginBottom: 10,
133
        marginTop: 30
134
    },
135
136
    swipeButton: {
137
        width: '25%',
138
        height: 5,
139
        backgroundColor: 'lightgrey',
140
        borderRadius: 25
141
    },
142
143
    textContainer: {
144
        width: '45%',
145
        marginBottom: 10,
146
        // padding: 0
147
        // alignItems: 'center'
148
        // flexDirection: 'row'
149
    },
150
151
    modalMessage: {
152
        backgroundColor: 'white',
153
        width: '100%',
154
        height: '30%',
155
        justifyContent: 'flex-start',
156
        alignItems: 'center',
157
        paddingTop: 10,
158
        // flexDirection: 'row'
159
        borderTopLeftRadius: 25,
160
        borderTopRightRadius: 25
161
    },
162
163
    scooterTitle: {
164
        fontWeight: 'bold',
165
        marginBottom: 10,
166
        fontSize: 16
167
    },
168
    
169
    battery: {
170
        marginLeft: 5,
171
        // width: 15,
172
        // height: 28
173
    },
174
175
    scooterImage: {
176
        margin: 10
177
    },
178
179
    tourButton: {
180
        backgroundColor: 'cornflowerblue',
181
        width: '80%',
182
        height: 50,
183
        borderRadius: 10,
184
        // display: 'flex',
185
        justifyContent: 'center',
186
        alignItems: 'center',
187
        marginBottom: 10
188
        // marginTop: 120,
189
    },
190
})